import styled from "@emotion/styled"
import { useNavigate } from "react-router-dom"
import { resolveAssetImage } from "@/utils/common"

const BackArrow = resolveAssetImage("pages/AccountPage/black_arrow.webp")
const SquareClose = resolveAssetImage("pages/AccountPage/square_close.webp")
const WhiteArrow = resolveAssetImage("pages/AccountPage/white_arrow.webp")

type IconType = "white-arrow" | "black-arrow" | "square-close"
interface PageHeaderProps {
    sticky?: boolean
    title?: string
    onBack?: () => void
    backgroundColor?: string
    backPath?: string
    textColor?: string
    iconType?: IconType
}

const iconMap = {
    "white-arrow": WhiteArrow,
    "black-arrow": BackArrow,
    "square-close": SquareClose,
}

const HeaderRoot = styled.div<{ backgroundColor?: string }>`
    width: 100%;
    height: 44rem;
    display: flex;
    align-items: center;
    padding: 0 12rem;
    background-color: ${(props) =>
        props.backgroundColor || "linear-gradient(180deg, #FF3279 0%, rgba(255, 50, 121, 0) 50%)"};
    color: white;
    z-index: 99;
    &.sticky {
        position: sticky;
        top: 0;
        left: 0;
        right: 0;
        z-index: 100;
    }
`
const BackImage = styled.img`
    width: 28rem;
    height: 28rem;
    margin-right: 8rem;
`

const Title = styled.h1<{ textColor?: string }>`
    margin: 0;
    font-size: 18rem;
    flex: 1;
    text-align: center;
    padding-right: 28rem;
    color: ${(props) => props.textColor || " #F9F9FA"};
    line-height: 28rem;
    font-weight: 500;
    font-family: "Gilroy";
`

export const PageHeader = ({
    sticky = false,
    title,
    onBack,
    backgroundColor,
    backPath,
    textColor,
    iconType = "white-arrow",
}: PageHeaderProps) => {
    const navigate = useNavigate()

    const handleBack = () => {
        if (onBack) {
            onBack()
        } else if (backPath) {
            navigate(backPath)
        } else {
            navigate(-1)
        }
    }

    return (
        <HeaderRoot
            backgroundColor={backgroundColor}
            className={sticky ? "sticky" : ""}
        >
            <BackImage
                onClick={handleBack}
                src={iconMap[iconType]}
            ></BackImage>
            <Title textColor={textColor}>{title}</Title>
        </HeaderRoot>
    )
}
